<template>
  <div>
    <p>click {{count}} times, count is {{evenOrOdd}}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementIfOdd">increment if odd</button>
    <button @click="incrementAsync">increment async</button>
  </div>
</template>


<script>
/* 
store对象内部结构
  有2个重要属性: 用于组件中读取state数据
    state: store内部管理的state对象
    getters: store内部管理的getters计算属性
  有2个重要方法: 用于组件中更新state数据
    dispatch('action名称', data): 触发action调用
    commit('mutaion名称', data): 触发mutation调用

*/
  export default {
    name: 'App',

    

    computed: {
      count () {
        return this.$store.state.count
      },
      evenOrOdd () {
        return this.$store.getters.evenOrOdd
      }
    },

    methods: {
      increment () {
        this.$store.commit('INCREMENT')
      },

      decrement () {
        this.$store.commit('DECREMENT')
      },

      incrementIfOdd () {
        this.$store.dispatch('incrementIfOdd')
      },
      incrementAsync () {
        this.$store.dispatch('incrementAsync')
      },
    }
  }
</script>

<style scoped>
  
</style>